<template>
  <div class="addStu">
    <h1>新增学生</h1>
    <div class="stuImgBox">
      <p>学生头像</p>
      <UpLoadImg />
    </div>
    <div class="contentBox">
      <label for="username" class="tip">学生姓名</label>
      <el-input id="username" placeholder="请输入姓名" v-model="stuData.name">
      </el-input>
    </div>
    <div class="contentBox">
      <label for="age" class="tip">年龄</label>
      <el-input
        type="number"
        id="username"
        placeholder="请输入年龄"
        v-model="stuData.age"
      ></el-input>
    </div>
    <div class="contentBox">
      <label for="password" class="tip">性别</label>
      <div class="genderBox">
        <el-radio v-model="stuData.gender" label="male">男</el-radio>
        <el-radio v-model="stuData.gender" label="female">女</el-radio>
      </div>
    </div>
    <div class="contentBox">
      <label for="classId" class="tip">班级</label>
      <el-select v-model="stuData.classId" placeholder="请选择">
        <el-option
          v-for="item in classData"
          :key="item._id"
          :label="item.name"
          :value="item._id"
        >
        </el-option>
      </el-select>
    </div>
    <div>
      <el-button type="primary" plain @click="open">确认新增</el-button>
    </div>
  </div>
</template>

<script>
import api from "@/http/api/apis.js";
import UpLoadImg from "../../uploadImg/UploadImg.vue";
import { createNamespacedHelpers } from "vuex";
const { mapState: imgMapState, mapMutations: imgMapMutations } =
  createNamespacedHelpers("img");
const { mapState: classMapState, mapActions: classMapActions } =
createNamespacedHelpers("classStore");

export default {
  components: { UpLoadImg },
  data() {
    return {
      stuData: {
        name: "", //必填
        age: "", //必填
        gender: "", //必填
        classId: "", //必填//先默认
        imagesName: "", //选填
      },
    };
  },
  computed: {
    //获取上传成功后的图片的名称
    ...imgMapState(["filename"]),
    //获取班级信息
    ...classMapState(['classData'])
  },
  mounted(){
    this.getClass()
  },
  methods: {
    ...imgMapMutations(["changeFilename"]),
    ...classMapActions(['getClass']),
    open() {
      this.$confirm("确认新增学生?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          console.log(this.stuData);
          const { data } = await api.studentApi.addStudent({
            ...this.stuData,
            // img上传图片状态机里的filename为空值，有图片上传成功后则不为空值
            imagesName: this.filename,
          });
          if (data.status) {
            console.log(data);
            this.$message({
              type: "success",
              message: data.message,
            });

            //新增成功后 将img上传图片状态机里的filename 设为空值
            this.changeFilename("");
          } else {
            this.$message({
              type: "error",
              message: data.message,
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消新增！",
          });
        });
    },
  },
};
</script>

<style scoped lang='scss' src="./addStu.scss">